<template>
	<view class="login">
		<view class="top">
			<image src="../../static/images/login(1).webp" mode=""></image>
		</view>
		<view class="quick" v-if="flag === true">
			<input type="text" placeholder="请输入手机号" v-model="phone" />
			<button @click="quickLogin">手机号一键登录</button>
			<text @click="tab">账号密码登录</text>
		</view>
		<view class="user" v-else>
			<view class="form">
				<input type="text" placeholder="请输入用户名" v-model="userInfo.username" />
				<input type="password" placeholder="请输入密码" v-model="userInfo.password" />
				<button @click="sure">登录</button>
				<text @click="tab">手机号一键登录</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { useMyStore } from '@/stores/myStore.js';
const store = useMyStore();
const userInfo = ref({
	username: '',
	password: ''
});
const flag = ref(true);
const tab = () => {
	flag.value = !flag.value;
};
const phone = ref('');
const bind = ref();
onMounted(() => {
	store.getLogin();
	bind.value = uni.getStorageSync('bind');
});
onShow(() => {
	bind.value = uni.getStorageSync('bind');
});
const quickLogin = () => {
	if (phone.value !== bind.value) {
		uni.showToast({
			icon: 'error',
			title: '手机号未绑定'
		});
	} else {
		uni.setStorageSync('token', store.account);
		uni.switchTab({
			url: '/pages/my/my'
		});
	}
};
const sure = () => {
	if (userInfo.value.username != store.account.username) {
		uni.showToast({
			title: '用户名错误',
			icon: 'error'
		});
	} else if (userInfo.value.password != store.account.password) {
		uni.showToast({
			title: '密码错误',
			icon: 'error'
		});
	} else {
		if (userInfo.value.username === bind.value) {
			uni.setStorageSync('token', store.account);
			uni.switchTab({
				url: '/pages/my/my'
			});
		} else {
			uni.setStorageSync('token', store.account);
			uni.navigateTo({
				url: '/pages/telBind/telBind'
			});
		}
	}
};
</script>

<style lang="scss">
.login {
	width: 100%;
	height: 100vh;
	background: url('~@/static/images/login(3).webp') no-repeat center center fixed;
	background-size: cover;
	box-sizing: border-box;
	.top {
		height: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		image {
			width: 50%;
			height: 50%;
			border-radius: 50%;
		}
	}
	.quick {
		height: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		input {
			width: 90%;
			height: 80rpx;
			border: none;
			background-color: rgba(255, 255, 255, 0.5);
			border-radius: 40rpx;
			box-sizing: border-box;
			padding-left: 60rpx;
		}
		button {
			width: 60%;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 50rpx 0;
			border-radius: 40rpx;
			background-color: rgba(255, 255, 255, 0.8);
		}
		text {
			color: #006eff;
		}
	}
	.user {
		height: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		.form {
			width: 90%;
			height: 90%;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			input {
				width: 90%;
				height: 80rpx;
				border: none;
				background-color: rgba(255, 255, 255, 0.5);
				border-radius: 40rpx;
				box-sizing: border-box;
				padding-left: 60rpx;
			}
			button {
				width: 90%;
				height: 80rpx;
				border: none;
				background-color: #006eff;
				color: #fff;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			text {
				color: #006eff;
			}
		}
	}
}
</style>
